<template>
  <div class="giftList">
    <div class="cont">
      <div class="tables" v-for="t in 3" :key="t">
        <h2 class="isCanuse">
          <span>失效</span>
        </h2>
        <div class="title">
          <span>一斤超高性价比</span>
          <span>2018-10-11 22:12</span>
        </div>
        <ul class="goodsInfo">
          <li class="detail">
            <div class="item" v-for="index in 2" :key="index">
              <img class="goodsImg" src="../../../assets/images/head.jpg" alt="商品标题">
              <div class="info">
                <h6>商品标题商品标题商品标题商品标题商品标题商品标题商品标题</h6>
                <p>
                  <span>单价：1.1元</span>
                  <span>重量：0.2kg</span>
                  <span>数量：1</span>
                </p>
              </div>
            </div>
          </li>
          <li class="price">
            <div>
              <span>商品总价</span>
              <strong>¥ 17</strong>
            </div>
            <div>
              <span>商品总重量</span>
              <strong>2.0kg</strong>
            </div>
            <i>快递费用由具体的地址和快递决定</i>
            <em>常用</em>
          </li>
          <li class="operate">
            <b class="text-button-b" @click="goWhere">修改礼品包</b>
            <br />
            <b class="text-button-b">删除礼品包</b>
            <br>
            <el-checkbox v-model="checked">设为常用礼品包</el-checkbox>
          </li>
        </ul>
      </div>
      <div class="pager">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </div>
    </div>
    <div class="addMore">
      <b class="button-w" @click="$router.push({name: 'editGift'})">添加礼品套餐</b>
    </div>
    <el-dialog custom-class="attition" title="提示" :modal-append-to-body="false" :visible.sync="warningObj.show" width="440px" top="20vh">
      <h2>最多只能设置3个常用礼品包</h2>
      <div class="footer">
        <b class="button-n">我知道了</b>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'giftList',
  data () {
    return {
      warningObj: {
        show: false
      }
    }
  },
  methods: {
    goWhere () {
      this.$router.push({ name: 'editGift', query: { fixed: 1 } })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index'
.giftList
  .cont
    // flex 1
    margin-top 24px
    .tables
      position relative
      border 1px solid #E2E2E2
      margin-bottom 12px
      overflow hidden
      .isCanuse
        position absolute
        top -100px
        right -100px
        width 200px
        height 200px
        transform rotateZ(45deg)
        background RGBA(102, 102, 102, 0.123)
        text-align center
        fontSize(40px, 1, $fontColor-d)
        span
          position absolute
          bottom 10px
          left 0
          right 0
          margin 0 auto
          vertical-align bottom
      .title
        display flex
        padding 0 20px
        fontSize($fontSize, 48px, $fontColor)
        background #F4F4F5
        span
          margin-right 200px
        .status
          color #FE7605
      .goodsInfo
        display flex
        li
          border-right 1px solid #E2E2E2
          box-sizing border-box
          &:last-child
            border none
        .detail
          display flex
          flex 3
          flex-direction column
          justify-content center
          >div
            display flex
            padding 20px
            border-bottom 1px solid #E2E2E2
            &:last-child
              border none
            .goodsImg
              width 80px
              height 80px
            .info
              flex 1
              h6
                fontSize($fontSize, 26px, $fontColor)
                margin-bottom 14px
              p
                display flex
                justify-content space-between
                fontSize($fontSize, 26px, $fontColor)
        .price
          position relative
          flex 2
          padding 20px
          display flex
          align-items center
          flex-direction column
          justify-content center
          >div
            min-width 150px
            text-align left
            strong
              margin-left 20px
          span
            fontSize($fontSize-m, 30px, $fontColor)
          strong
            fontSize(28px, 30px, $mainColor)
          i
            fontSize($fontSize-s, 30px, $fontColor-gray)
          em
            position absolute
            top 10px
            right 10px
            width 80px
            line-height 40px
            height 40px
            font-weight bold
            text-align center
            color #FF7503
            background RGBA(255, 117, 3, 0.12)
        .operate
          flex 1
          padding 20px
          text-align left
          display flex
          flex-direction column
          justify-content center
  .addMore
    text-align center
    padding-bottom 40px
.attition
  h2
    margin 50px 0
    fontSize($fontSize-l, 1, $fontColor)
    text-align center
  .footer
    text-align center
    padding-bottom 40px
    b
      padding 0 20px
</style>
